<template>
    <el-tabs v-model="activeName" @tab-click="handleClick" :tab-position="tabPosition">
        <el-tab-pane label="预定订单" name="second">
                <form class="yue-sty">
                <el-row :gutter="20">
                    <el-col :span="6" :offset="4">
                        <el-input v-model="yyOrderNum" placeholder="订单号"></el-input>
                    </el-col>
                    <el-col :span="5" ><div class="grid-content bg-purple-dark">
                        <el-date-picker
                                v-model="value1"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="下单时间"
                                end-placeholder="下单时间">
                        </el-date-picker>
                    </div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="2" :offset="4">
                        <el-button type="primary" @click="orderSai" icon="el-icon-search" plain>筛选</el-button>
                    </el-col>
                </el-row>
            </form>
            <el-tabs type="border-card"  v-model="bookOrderXuan" @tab-click="handleClick">
                <el-tab-pane label="今日" name="one">
                    <el-table
                            :data="bookOrder"
                            style="width: 100%">
                        <el-table-column
                                label="预约单号"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="顾客编号"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.customerId  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="就餐人数"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookHuman  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约日期"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookDate  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约时间"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约保留时间"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.retainTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约押金10%"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.deposit  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="状态"
                               >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.state  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="操作">
                            <template slot-scope="scope">
                                <el-popconfirm
                                        title="确认删除？"
                                        confirmButtonText='确定'
                                        cancelButtonText='取消'
                                        icon="el-icon-info"
                                        iconColor="red"
                                        @onConfirm="delBookOrder(scope.row.id)"
                                >
                                    <el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="全部" name="two">
                    <el-table
                            :data="bookOrder"
                            style="width: 100%">
                        <el-table-column
                                label="预约单号"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="顾客编号"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.customerId  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="就餐人数"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookHuman  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约日期"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookDate  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约时间"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约保留时间"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.retainTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约押金10%"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.deposit  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="状态"
                               >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.state  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="操作">
                            <template slot-scope="scope">
                                <el-popconfirm
                                        title="确认删除？"
                                        confirmButtonText='确定'
                                        cancelButtonText='取消'
                                        icon="el-icon-info"
                                        iconColor="red"
                                        @onConfirm="delBookOrder(scope.row.id)"
                                >
                                    <el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="未付款" name="three">
                    <el-table
                            :data="bookOrder"
                            style="width: 100%">
                        <el-table-column
                                label="预约单号"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="顾客编号"
                               >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.customerId  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="就餐人数"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookHuman  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约日期"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookDate  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约时间"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约保留时间"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.retainTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约押金10%"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.deposit  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="状态"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.state  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="操作">
                            <template slot-scope="scope">
                                <el-popconfirm
                                        title="确认删除？"
                                        confirmButtonText='确定'
                                        cancelButtonText='取消'
                                        icon="el-icon-info"
                                        iconColor="red"
                                        @onConfirm="delBookOrder(scope.row.id)"
                                >
                                    <el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="待结账" name="four">
                    <el-table
                            :data="bookOrder"
                            style="width: 100%">
                        <el-table-column
                                label="预约单号"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="顾客编号"
                               >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.customerId  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="就餐人数"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookHuman  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约日期"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookDate  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约时间"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约保留时间"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.retainTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约押金10%"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.deposit  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="状态"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.state  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="操作">
                            <template slot-scope="scope">
                                <el-popconfirm
                                        title="确认删除？"
                                        confirmButtonText='确定'
                                        cancelButtonText='取消'
                                        icon="el-icon-info"
                                        iconColor="red"
                                        @onConfirm="delBookOrder(scope.row.id)"
                                >
                                    <el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="待消费" name="five">
                    <el-table
                            :data="bookOrder"
                            style="width: 100%">
                        <el-table-column
                                label="预约单号"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="顾客编号"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.customerId  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="就餐人数"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookHuman  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约日期"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookDate  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约时间"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约保留时间"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.retainTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约押金10%"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.deposit  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="状态"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.state  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="操作">
                            <template slot-scope="scope">
                                <el-popconfirm
                                        title="确认删除？"
                                        confirmButtonText='确定'
                                        cancelButtonText='取消'
                                        icon="el-icon-info"
                                        iconColor="red"
                                        @onConfirm="delBookOrder(scope.row.id)"
                                >
                                    <el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="已结账" name="six">
                    <el-table
                            :data="bookOrder"
                            style="width: 100%">
                        <el-table-column
                                label="预约单号"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="顾客编号"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.customerId  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="就餐人数"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookHuman  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约日期"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookDate  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约时间"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.bookTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约保留时间"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.retainTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约押金10%"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.deposit  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="状态"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.state  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="操作">
                            <template slot-scope="scope">
                                <el-popconfirm
                                        title="确认删除？"
                                        confirmButtonText='确定'
                                        cancelButtonText='取消'
                                        icon="el-icon-info"
                                        iconColor="red"
                                        @onConfirm="delBookOrder(scope.row.id)"
                                >
                                    <el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="点餐订单" name="third">
            <form class="yue-sty">
                <el-row :gutter="10">
                    <el-col :span="3" :offset="3">
                        <div class="grid-content bg-purple-dark">
                            日期：
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="7">
                        <el-select v-model="option">
                            <el-option
                                    v-for="item in options"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="1">
                        <el-button type="primary" @click="orderTypeSou" icon="el-icon-search" plain>搜索</el-button>
                    </el-col>
                </el-row>
            </form>
            <el-tabs type="border-card">
                <el-tab-pane :label="label">
                    <el-table
                            :data="diancanOrder.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                            style="width: 100%">
                        <el-table-column
                                label="单号"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="点单时间"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.orderTime }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="就餐人数"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.humanCount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="消费类型"
                               >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.orderType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="消费金额"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.price }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="实付金额">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.actualPrice }}</span>
                            </template>
                        </el-table-column>
<!--                        <el-table-column-->
<!--                                prop="address"-->
<!--                                label="操作">-->
<!--                            <el-button type="primary" icon="el-icon-edit" circle @click="alterModel(scope.row)"></el-button>-->
<!--                            <el-button type="danger" icon="el-icon-delete" circle @click="delTable(scope.row.tableNum)"></el-button>-->
<!--                        </el-table-column>-->
                    </el-table>
                    <div class="block">
                        <el-pagination
                                @current-change="handleCurrentChange"
                                @size-change="handleSizeChange"
                                :page-size="pageSize"
                                :pager-count="5"
                                :current-page="currentPage"
                                :page-sizes="[3, 5, 8, 10]"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="this.diancanOrder.length">
                        </el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="客房服务订单" name="fourth">
            <div style="margin-top: 20px"></div>
<!--                        <el-row :gutter="10">-->
<!--                            <el-col :span="2"><div class="grid-content bg-purple-dark">-->
<!--                                入住日期：-->
<!--                            </div></el-col>-->
<!--                            <el-col :span="5">-->
<!--                                <el-date-picker-->
<!--                                        v-model="value2"-->
<!--                                        type="daterange"-->
<!--                                        range-separator="至"-->
<!--                                        start-placeholder="开始日期"-->
<!--                                        end-placeholder="结束日期"-->
<!--                                        align="right">-->
<!--                                </el-date-picker>-->
<!--                            </el-col>-->
<!--                            <el-col :span="2" :offset="1">-->
<!--                                <div class="grid-content bg-purple-dark">-->
<!--                                    房型：-->
<!--                                </div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="3" >-->
<!--                                <el-select v-model="houseType" placeholder="请选择">-->
<!--                                    <el-option-->
<!--                                            v-for="item in houseTypes"-->
<!--                                            :value="item.name">-->
<!--                                    </el-option>-->
<!--                                </el-select>-->
<!--                            </el-col>-->
<!--                            <el-col :span="2">-->
<!--                                <div class="grid-content bg-purple-dark">-->
<!--                                    状态：-->
<!--                                </div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="3" >-->
<!--                                <el-select v-model="houseType" placeholder="请选择">-->
<!--                                    <el-option-->
<!--                                            v-for="item in houseTypes"-->
<!--                                            :value="item.name">-->
<!--                                    </el-option>-->
<!--                                </el-select>-->
<!--                            </el-col>-->
<!--                            <el-col :span="4" >-->
<!--                                <el-input v-model="input" placeholder="请输入姓名、电话或订单号"></el-input>-->
<!--                            </el-col>-->
<!--                            <el-col :span="1">-->
<!--                                <el-button icon="el-icon-search" circle></el-button>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
                        <el-table
                                :data="diancanOrder.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)"
                                style="width: 100%">
                            <el-table-column
                                    prop="date"
                                    label="订单ID"
                                    width="180">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="服务员Id"
                                    width="180">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.staffId }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="消费时间">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.orderTime }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="备注">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.comment }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="服务时间">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.guestTime }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="服务信息">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.guestInfo }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
            <div style="text-align: center">
                <el-pagination
                        @current-change="handleCurrentChange1"
                        @size-change="handleSizeChange1"
                        :page-size="pageSize1"
                        :pager-count="5"
                        :current-page="currentPage1"
                        :page-sizes="[3, 5, 8, 10]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="diancanOrder.length">
                </el-pagination>
            </div>
        </el-tab-pane>
    </el-tabs>

</template>
<script>
    export default {
        name: "Order",
        data() {
            return {
                pageSize1:5,
                currentPage1:1,
                tabPosition:'left',
                label:'全部',
                pageSize:5,
                currentPage:1,
                input:'',
                diancanOrder:[],
                diancanOrder1:[],
                options:['全部','店吃','客房','外带'],
                option:'全部',
                bookOrderXuan:'two',
                houseTypes:[],
                houseType:'',
                yyOrderNum:'',
                makeNum:'',
                makeTypes:['手机号','预约姓名'],
                makeType:'手机号',
                orderData:[],
                seekTypes:['订单号','外部单号'],
                seekType:'订单号',
                odd:'',
                activeName: 'second',
                num:'2222',
                types:['全部','外卖订单','点餐订单','线下订单','记账订单','充值订单','砍价订单','拓客订单','抽奖订单','预定订单','线下收款订单'],
                type:'全部',
                states:['全部','售后处理中','售后结束'],
                state:'',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value:'',
                value1: [],
                value2: '',
                orderStates:['全部','代付款','带发货','已发货','交易完成','已关闭','退货中','确认收货'],
                orderState:'全部',
                transports:['全部','快递配送','上门自提','同城配送','达达配送','待取餐'],
                transport:'全部',
                payments:['全部','微信支付','小程序支付','微信扫码支付','支付宝','货到付款','现金支付','余额支付','POS支付'],
                payment:'全部',
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                bookOrder:[],
                bookOrder1:[],
            };
        },
        methods: {
            orderSai(){
                this.bookOrder = this.bookOrder1.filter((data)=>{
                    return data.id == this.yyOrderNum;
                })
            },
            orderTypeSou(){
                this.label = this.option;
                this.diancanOrder = this.diancanOrder1.filter((data)=>{
                    return data.orderType == this.option || this.option == '全部';
                })
            },
            handleClick() {
                var name = this.bookOrderXuan;
                console.log(name);
                console.log(this.bookOrder)
                this.bookOrder = this.bookOrder1.filter((data)=>{
                    if(name == 'one'){
                        return data.bookDate == new Date().getFullYear()+'-0'+(new Date().getMonth()+1)+'-'+new Date().getDate();
                    }else if(name == 'two'){
                        return true
                    }else if(name == 'three'){
                        return data.state == '待付款'
                    }else if(name =='four'){
                        return data.state == '待结账'
                    }else if(name == 'five'){
                        return data.state == '待消费'
                    }else if(name == 'six'){
                        return data.state == '已结账'
                    }
                })
            },
            getAllOrder(){
                this.$axios.post('/order/allOrder').then((datas) =>{
                    datas.data.forEach((data) =>{
                        this.orderData.push(data)
                    })
                })
            },
            getBookOrder(){
                this.$axios.post('/bookOrder/list').then((datas) =>{
                    this.bookOrder.length = 0;
                    datas.data.forEach((data) =>{
                            this.bookOrder.push(data);
                    })
                    this.bookOrder1 = this.bookOrder;
                })
            },
            getOrderBookingToday(){
                this.$axios.post('/bookOrder/todayTheOrder').then((datas)=>{
                    this.bookOrder.length = 0;
                    datas.data.forEach((data)=>{
                        this.bookOrder.push(data);
                    })
                })
            },
            delBookOrder(id , name){
                console.log(this.bookOrderXuan)
                var par = new URLSearchParams;
                par.append('id',id);
                this.$axios.post('/bookOrder/del',par).then((data)=>{
                    if(data.data == true){
                        this.$router.go(0);
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    }else {
                        this.$message.error('删除失败');
                    }
                })
            },
            getQueryByState(){
                var data = new URLSearchParams;
                if(this.bookOrderXuan == 'three'){
                    data.append("state",'未付款')
                }else if(this.bookOrderXuan == 'four'){
                    data.append("state",'待确认')
                }else if(this.bookOrderXuan == 'five'){
                    data.append("state",'待消费')
                }else if(this.bookOrderXuan =='six'){
                    data.append("state",'完成')
                }
                this.$axios.post('/bookOrder/queryByState',data).then((datas)=>{
                    this.bookOrder.length = 0;
                    datas.data.forEach((data)=>{
                        this.bookOrder.push(data);
                    })
                })
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变当前页数
                this.currentPage=val
            },
            handleSizeChange(val){
                this.pageSize = val;
            },
            handleCurrentChange1(val) {
                // 改变当前页数
                this.currentPage1=val
            },
            handleSizeChange1(val){
                this.pageSize1 = val;
            },
            getdianOrder(){
                this.$axios.post('ec/list').then((datas)=>{
                    // this.totalNum = datas.data.length % this.pageSize === 0 ?datas.data.length / this.pageSize:datas.data.length / this.pageSize + 1;
                    this.diancanOrder.length = 0;
                    datas.data.forEach(data=>{
                        this.diancanOrder.push(data);
                    })
                    this.diancanOrder1 = this.diancanOrder;
                    // this.transactionData2 = this.diancanOrder;
                });
            }

        },
        mounted:function () {
            this.getdianOrder();
            this.getBookOrder();
        }
    }
</script>

<style scoped>
    @import "../style/order.css";
</style>